// 引入vue
import Vue from 'vue'
// 引入App组件
import App from './App.vue'
// 注册三级联动-----全局组件
import TypeNav from '@/components/TypeNav'
import Carousel from '@/components/Carousel'
import Pagination from '@/components/Pagination'
import {
  Button,
  MessageBox
} from 'element-ui'
// 全局组件  第一个参数组件名字 第二个参数哪个组件
Vue.component(TypeNav.name, TypeNav)
Vue.component(Carousel.name, Carousel)
Vue.component(Pagination.name, Pagination)
Vue.component(Button.name, Button)
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
// 引入路由相关的文件
import router from '@/router'
// 引入仓库
import store from '@/store'
// 引入mock数据
import '@/mock/mockServe'
// 引入swiper样式
import 'swiper/css/swiper.css'
// 统一引入api 并放到全局
import * as API from '@/api'
// 引入图·gif 
import doraemon from '@/assets/1.gif';
// 懒加载插件
import VueLazyload from 'vue-lazyload'
// 表单验证
import VeeValidate from 'vee-validate'
// 引入中文 message
import zh_CN from 'vee-validate/dist/locale/zh_CN'
// 使用插件
Vue.use(VeeValidate)
Vue.use(VueLazyload, {
  loading: doraemon,
})
VeeValidate.Validator.localize('zh_CN', {
  messages: {
    ...zh_CN.messages,
    is: (field) => `${field}必须与密码相同` // 修改内置规则的 message，让确认密码和密码相同
  },
  attributes: { // 给校验的 field 属性名映射中文名称
    phone: '手机号',
    code: '验证码',
    password: '密码',
    password1: '确认密码',
    agree: '协议'
  }
})
//自定义校验规则
//定义协议必须打勾同意
VeeValidate.Validator.extend('agree', {
  validate: value => {
    return value
  },
  getMessage: field => field + '必须同意'
})

// Vue.config.productionTip = false


new Vue({
  render: h => h(App),
  // 配置全局事件总线$bus
  beforeCreate() {
    Vue.prototype.$bus = this
    Vue.prototype.$API = API
  },
  // 注册路由
  router,
  // 注册仓库
  store
}).$mount('#app')